<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>气球升空</title>
    <link rel="stylesheet" href="css/qq.css"/>
</head>
<body>
<div  class="container">
    <marquee behavior="alternate"><h1>春游</h1></marquee>

    <div class="balloon" style="--left: 5%; --hue: 30; --size: 90px;">
        <div class="handle"></div>
    </div>
    <div class="balloon" style="--left: 15%; --hue: 130; --size: 110px;">
        <div class="handle"></div>
    </div>
    <div class="balloon" style="--left: 20%; --hue: 300; --size: 140px;">
        <div class="handle"></div>
    </div>
    <div class="balloon" style="--left: 30%; --hue: 200; --size: 170px;">
        <div class="handle"></div>
    </div>
    <div class="balloon" style="--left: 40%; --hue: 150; --size: 130px;">
        <div class="handle"></div>
    </div>
    <div class="balloon" style="--left: 50%; --hue: 0; --size: 200px;">
        <div class="handle"></div>
    </div>
    <div class="balloon" style="--left: 60%; --hue: 270; --size: 180px;">
        <div class="handle"></div>
    </div>
    <div class="balloon" style="--left: 70%; --hue: 240; --size: 150px;">
        <div class="handle"></div>
    </div>
    <div class="balloon" style="--left: 80%; --hue: 50; --size: 150px;">
        <div class="handle"></div>
    </div>
    <div class="balloon" style="--left: 90%; --hue: 140; --size: 90px;">
        <div class="handle"></div>
    </div>

    <div id="bird1"></div>
    <div id="bird2"></div>

    <marquee><img src="img/girl.png"/></marquee>
</div>
</body>
</html>